/*
 * Copyright © 2018 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
*/

@import "../../styles/variables.less";

@border-color: @grey-05;
@regular-font: 14px;
@side-panel-width: 170px;
@active-bg-color: @grey-07;
@text-color: @grey-01;

.configurations-side-panel {
  border-right: 1px solid @border-color;

  .configurations-tabs {
    .configuration-tab {
      height: 40px;
      display: flex;
      align-items: center;
      padding-left: 23px;
      font-size: @regular-font;
      cursor: pointer;
      width: @side-panel-width;
      border-bottom: 1px solid @border-color;

      &:hover {
        color: var(--brand-primary-color);
      }

      &.active {
        background-color: @active-bg-color;
        color: var(--brand-primary-color);
        font-weight: bold;
      }

      &.disabled {
        pointer-events: none;
        color: lighten(@text-color, 60%);
      }

      &.toggle-advanced-options {
        padding-left: 0;

        .fa-caret-right,
        .fa-caret-down,
        .icon-caret-right,
        .icon-caret-down {
          height: 14px;
          width: 14px;
          margin: 0 1px 0 9px;
        }
      }
    }
  }
}

my-batch-pipeline-config,
my-realtime-pipeline-config,
my-sql-pipeline-config {
  my-number-widget {
    margin-right: 5px;
    width: 60px;
  }
  .pipeline-configurations-content .configuration-content {
    .configuration-content-container {
      border-bottom: 0;
    }
    #engine-config-tab-content {
      &.configuration-step-content {
        &#runtime-arguments-key-value-pairs-wrapper {
          height: ~"calc(100% - 75px)";
          .runtime-arguments-labels {
            grid-template-columns: 1fr 1fr 0.8fr;
            &.key-value-pair-labels > .provided-label {
              display: flex;
              justify-content: center;
              width: 100%;
            }
          }
        }
        .custom-config-labels {
          &.key-value-pair-labels {
            display: grid;
            grid-template-columns: 1fr 1fr 62px 100px;
            grid-gap: 10px;
            margin-right: -25px;
          }
        }
        .custom-config-values {
          /*
            101px = (32+15) * 2 + 7
            32 = height of key-value-row
            15 = margin-bottom of each key-value-row
            7 = get a glimpse of next row if any.
          */
          max-height: 101px;
          .key-value-pair-preference {
            display: grid;
            grid-template-columns: 1fr 1fr auto 100px;
            grid-gap: 10px;
            input {
              width: 100%;
            }
          }
        }
      }
    }
    .configuration-step-navigation {
      border-top: 1px solid @grey-05;
      padding-top: 10px;
    }
  }
}
